<template>
  <div class="box" :style="containerStyle">
    <div class="header" :style="headerImg">
      <span>www.fangxiaohu.top</span>
      <span class="title">数据可视化测试平台</span>
      <div class="title-right">
        <img :src="tyleChangeIcon" @click="CHANGE_STYLE_ACTION" alt="" />
        <span class="time">{{ time }}</span>
      </div>
    </div>
    <div class="layout">
      <div class="left">
        <div :class="['children_box', boxName('Seller')]">
          <Seller ref="Seller" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('Seller')"
              :class="['iconfont', icopnName('Seller')]"
            ></span>
          </div>
        </div>
        <div :class="['children_box', boxName('Trend')]">
          <Trend ref="Trend" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('Trend')"
              :class="['iconfont', icopnName('Trend')]"
            ></span>
          </div>
        </div>
      </div>
      <div class="content">
        <div :class="['c_top', boxName('Map')]">
          <Map ref="Map" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('Map')"
              :class="['iconfont', icopnName('Map')]"
            ></span>
          </div>
        </div>
        <div :class="['c_bottom', boxName('Rank')]">
          <Rank ref="Rank" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('Rank')"
              :class="['iconfont', icopnName('Rank')]"
            ></span>
          </div>
        </div>
      </div>
      <div class="right">
        <div :class="['children_box', boxName('Hot')]">
          <Hot ref="Hot" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('Hot')"
              :class="['iconfont', icopnName('Hot')]"
            ></span>
          </div>
        </div>
        <div :class="['children_box', boxName('Stock')]">
          <Stock ref="Stock" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              @click="changeSize('Stock')"
              :class="['iconfont', icopnName('Stock')]"
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { getThemeValue } from "@/utils/theme_utils.js";
import Hot from "@/components/Hot.vue";
import Map from "@/components/Map.vue";
import Rank from "@/components/Rank.vue";
import Seller from "@/components/Seller.vue";
import Stock from "@/components/Stock.vue";
import Trend from "@/components/Trend.vue";
export default {
  data() {
    return {
      fullScreenStatus: null,
      time: "",
    };
  },
  created() {
    setInterval(() => {
      this.time = this.$moment().format("YYYY-MM-DD hh:mm:ss");
    }, 1000);
  },
  components: {
    Hot,
    Map,
    Rank,
    Seller,
    Stock,
    Trend,
  },
  computed: {
    ...mapState(["style"]),
    containerStyle() {
      return {
        background: getThemeValue(this.style).backgroundColor,
        color: getThemeValue(this.style).titleColor,
      };
    },
    headerImg() {
      return {
        backgroundImage: `url(./static/img/${
          getThemeValue(this.style).headerBorderSrc
        })`,
        backgroundSize: "100% 100%",
        backgroundRepeat: "no-repeat",
      };
    },
    tyleChangeIcon() {
      return "./static/img/" + getThemeValue(this.style).themeSrc;
    },
  },
  methods: {
    ...mapActions(["CHANGE_STYLE_ACTION"]),
    changeSize(str) {
      let lsStr = this.fullScreenStatus;
      if (str == this.fullScreenStatus) {
        this.fullScreenStatus = null;
        this.$nextTick(() => {
          this.$refs[lsStr].screenAdapter();
        });
      } else {
        this.fullScreenStatus = str;
        this.$nextTick(() => {
          this.$refs[this.fullScreenStatus].screenAdapter();
        });
      }
    },
    // icon名称修改
    icopnName(name) {
      if (this.fullScreenStatus == name) {
        return "icon-compress-alt";
      } else {
        return "icon-expand-alt";
      }
    },
    boxName(name) {
      if (this.fullScreenStatus == name) {
        return "fullscreen";
      } else {
        return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .header {
    height: 64px;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .title {
      position: absolute;
      left: 50%;
      top: 50%;
      font-size: 28px;
      transform: translate(-50%, -50%);
    }
    .title-right {
      line-height: 64px;
      vertical-align: middle;
      img {
        margin-right: 10px;
        width: 26px;
        vertical-align: middle;
      }
      .time {
        vertical-align: middle;
        font-size: 16px;
      }
    }
  }
  .layout {
    flex: 1;
    display: flex;
    .content {
      width: 40%;
      margin: 0 0.5%;
      display: flex;
      flex-direction: column;
      .c_top {
        position: relative;
        height: 60%;
        margin-bottom: 10px;
      }
      .c_bottom {
        position: relative;
        flex: 1;
      }
    }
    .left,
    .right {
      width: 30%;
      .children_box {
        height: 49.5%;
        position: relative;
        overflow: hidden;
        &:nth-child(2) {
          margin-top: 1%;
        }
      }
    }
  }
}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
// 全屏样式的定义
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}
</style>